<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>动漫分类-日产</title>  
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式表 -->  
</head>  
<style>
    /* 样式表：styles.css */  
  
/* 清除默认的列表样式 */  
nav ul {  
    list-style-type: none;  
    padding: 0;  
    margin: 0;  
    overflow: hidden; /* 防止内容溢出容器 */  
    background-color: #333; /* 导航栏背景色 */  
}  
  
/* 导航栏中的链接 */  
nav ul li {  
    float: left; /* 让列表项浮动以水平排列 */  
}  
  
nav ul li a {  
    display: block; /* 将链接转换为块级元素以填充整个列表项空间 */  
    color: white; /* 链接文字颜色 */  
    text-align: center; /* 文字居中 */  
    padding: 50px 80px; /* 内边距 */  
    text-decoration: none; /* 去除下划线 */ 
    font-size: 40px; 
}  
  
/* 链接的鼠标悬停效果 */  
nav ul li a:hover {  
    background-color: #111; /* 鼠标悬停时的背景色 */  
}  
  
/* 头部区域 */  
header {  
    display: flex; /* 使用Flexbox布局 */  
    flex-direction: column; /* 垂直方向排列子元素 */  
    align-items: center; /* 子元素在交叉轴上居中（这里是水平居中） */  
    justify-content: space-between; /* 子元素在主轴上分布 */  
    padding: 20px; /* 内边距 */  
    background-color: #f2f2f2; /* 背景色 */  
}  
  
header h1 {  
    color: #333; /* 标题文字颜色 */  
    text-align: center; /* 标题文字居中 */  
    font-size: 80px;
}  
  
header p {  
    color: #666; /* 段落文字颜色 */  
    text-align: center; /* 段落文字居中 */  
    margin-bottom: 0; /* 底部外边距为0 */  
    font-size: 20px;
}  

.image-container {  
        display: flex;  
        flex-wrap: wrap; /* 允许图片换行显示 */  
        justify-content: space-between; /* 图片之间水平间距 */  
    }  

    .image-item {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        margin-bottom: 20px; /* 图片之间的垂直间距 */  
    }  
    .image-item h3 {  
        text-align: center; /* 标题居中 */  
        margin-top: 10px; /* 标题上方的间距 */  
    }  
/* 其他可能的样式，如响应式布局等 */  
/* ... */
</style>
<body>  

<!-- 头部区域 -->  
<header>  
    <nav>  
        <ul>  
            <li><a href="shouye.html">首页</a></li>  
            <li><a href="shouye.html#anime-list">动漫列表</a></li>  
            <li><a href="fenlei.html">分类</a></li>  
            <li><a href="gengxin.html">最近更新</a></li>  
            <li><a href="#">注册</a></li>  
            <li><a href="#">登录</a></li>  
            <li><a href="#">搜索</a></li>  
            <li><a href="#">浏览记录</a></li>  
            <li><a href="#news">新闻</a></li>  
            <li><a href="#contact">联系我们</a></li>  
        </ul>  
    </nav>  
</header>  
<h1>动漫分类-日产</h1>
<!-- 轮播图或横幅广告 -->  
<section id="banner">  
    <div class="image-container">  
        <div class="image-item"> 
          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.MDcMdsABc9M5g49wvN4_-wHaFN?w=247&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
          <h3>进击的巨人</h3>
        </div>
        <div class="image-item"> 
          <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.rZxgtawdtSWNHdHZElI8dQHaEK?w=286&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
          <h3>死亡笔记</h3>
        </div>
        <div class="image-item"> 
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.4vnVKdRdS0GntfDGyu6GCgHaE4?w=284&h=188&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>冰菓</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.EXgfN7sRYbUuXEzSBxeNkAHaEK?w=321&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>一拳超人</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C._M-ENgAi2r94UnvfKifRrQHaEK?w=286&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>刀剑神域</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.MAewy6j0n5fv9V5TLTBUOwHaEK?w=312&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>我推的孩子</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.ZRg-avEr3VVLvUEidGLoTAHaEK?w=197&h=111&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>JoJo的奇妙冒险</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.OmPaIwnm0EHgV0xVIMcEoQHaEJ?w=321&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>紫罗兰的永恒花园</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.RuKnXXslU-kIDDriupMqeAHaEK?w=319&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>国家队</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.mDj0GWG2oIpH9ebJgu8dNwHaEK?w=286&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>Charlotte</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.eTCn_HkDo1cI5ygOuTEKtQHaEW?w=296&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>寄生兽</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.CODRMtrTOresbz9cuyGR0wHaEK?w=326&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>东京食尸鬼</h3>
          </div>
    </div>  
</section> 
  
  
</body>  
</html>